<template>
  <el-card shadow="never" class="portal-eChart-box">
    <div slot="header" class="portal-common-title">
      <span>{{ title }}{{ subTitle }}</span>
      <div style="width: 80px;position: absolute;  top: 13px;    z-index: 10000;   right: 65px;">
        <el-select v-model="value" placeholder="请选择" @change="handleChangeData">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
    </div>
    <div class="eChart-box-body">
      <div ref="regionChart" id="chart" v-show="!isEmpty"></div>
      <div class="portal-common-noData portal-common-noData-eChart" v-show="isEmpty">
        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img" />
        <p class="noData-txt">暂无数据</p>
      </div>
    </div>
  </el-card>
</template>
<script>
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'
import { getCampusSign, getReportPie } from '@/api/home'
export default {
  mixins: [resize],
  props: {
    title: { type: String, default: '' },
    option: { type: Object, default: () => {} },
    propsApi: '',
    subTitle: ''
  },
  data() {
    return {
      chart: null,
      currOption: {},
      isEmpty: false,
      activeName: 'regionChart',
      options: [
        {
          value: '1',
          label: '本周'
        },
        {
          value: '2',
          label: '本月'
        },
        {
          value: '3',
          label: '本年'
        }
      ],
      value: '3'
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleChangeData() {
      this.getData()
    },
    timeout(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done')
      })
    },
    getData() {
      getReportPie(this.propsApi, this.value).then(res => {
        if (res.data.length == 0) {
          this.isEmpty = true
        }
        res.data.sort((a, b) => a.value - b.value)

        this.currOption = {
          // 标题设置
          // title: [
          //   {
          //     text: this.title,
          //     x: 'left',
          //     textStyle: {
          //       // 主标题文本样式
          //       color: '#76757d', // 标题颜色，这里设置为红色
          //       fontSize: 22 // 标题字体大小，这里设置为20
          //     }
          //   },
          //   {
          //     text: this.subTitle,
          //     x: 'left',
          //     textStyle: {
          //       fontSize: 12, // 副标题字体大小
          //       color: '#908f8f', // 副标题颜色,
          //       fontWeight: 'normal'
          //     },
          //     left: '85',
          //     top: '6'
          //   }
          // ],
          // 提示框组件
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow' // 阴影效果
            }
          },
          // 网格设置
          grid: {
            top: '1%', // 顶部边距
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          color: ['#1aacfd', '#71eae0', '#5470c6', '#91cc75', '#fac858', '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
          // x轴设置
          xAxis: {
            type: 'value', // 类型为数值轴
            boundaryGap: [0, 0.01]
          },
          // y轴设置
          yAxis: {
            type: 'category', // 类型为类目轴
            data: res.data.map(item => item.name), // 类目数据
            axisLabel: {
              formatter: function(value) {
                var ret = '' // 拼接加\n返回的类目项
                var maxLength = 5 // 每项显示文字个数
                var valLength = value.length
                if (valLength > 5) {
                  return value.substring(0, 5) + '...'
                } else {
                  return value
                }
                /*var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
                for (var i = 0; i < rowN; i++) {
                  var temp = value.substring(i * maxLength, i * maxLength + maxLength) + "\n";
                  ret += temp;
                }
                return ret;*/
              }
            }
          },
          // 系列列表
          series: [
            {
              type: 'bar', // 类型为柱状图
              data: res.data.map(item => item.value), // 类目数据
              // 柱子宽度
              barWidth: '60%',
              // 柱子最小高度
              barMinHeight: 0,
              itemStyle: {
                color: function(params) {
                  // 根据params的 dataIndex 来返回不同的颜色
                  const colorsMap = ['#1aacfd', '#71eae0', '#5470c6', '#91cc75', '#fac858', '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                  return colorsMap[params.dataIndex % colorsMap.length]
                }
              }
            }
          ]
        }
        this.timeout(100).then(value => {
          this.initChart()
        })
      })
    },
    initChart(refs) {
      let ref = refs ? refs : this.$refs.regionChart
      
      if (!ref) {
        console.warn('Chart container element not found')
        return
      }
      
      this.chart = echarts.init(ref)
      this.chart.setOption(this.currOption)
      setTimeout(() => {
        this.$nextTick(() => {
          if (this.chart) {
            this.chart.resize()
          }
        })
      }, 50)
    }
  },
  beforeDestroy() {
    if (!this.chart) return
    this.chart.dispose()
    this.chart = null
  }
}
</script>
<style lang="scss">
.eChart-box-body {
  .el-input {
    input {
      border-radius: 20px;
    }
  }
}
</style>
